<template>
	<div style="width: 100vw;height: 100vh;">
		<van-nav-bar style="height: 6vh;" title="远程控制" left-text="返回" @click-left="onClickLeft" />
		<img style="height: 87vh;" src="@/assets/control/car.png" alt="">
		<van-tabbar v-model="active">
			<van-tabbar-item @click="tabs(0)">
				<span>闪灯</span>
				<template #icon="props">
					<img :src="light" alt="">
				</template>
			</van-tabbar-item>
			<van-tabbar-item @click="tabs(1)">
				<span>鸣笛</span>
				<template #icon="props">
					<img :src="whistle" alt="">
				</template>
			</van-tabbar-item>
			<van-tabbar-item @click="tabs(2)">
				<span>启动</span>
				<template #icon="props">
					<img :src="firing" alt="">
				</template>
			</van-tabbar-item>
			<van-tabbar-item @click="tabs(3)">
				<span>通风</span>
				<template #icon="props">
					<img :src="ventilate" alt="">
				</template>
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
import { CarState, doCarStart } from '@/api/user';

export default {
	data() {
		return {
			active: null,
			light: require('../../assets/control/light.png'),
			firing: require('../../assets/control/firing.png'),
			ventilate: require('../../assets/control/ventilate.png'),
			whistle: require('../../assets/control/whistle.png'),
			carState: null
		}
	},
	methods: {
		onClickLeft() {
			this.$router.go(-1);
		},
		tabs(index) {
			if (this.carState == 3) {
				if (index == 0) {
					
				} else if (index == 1) {

				} else if (index == 2) {

				}
				else if (index == 3) {

				}
			} else {
				this.active = null
			}
		}
	},
	created() {
		CarState(window.localStorage.getItem('carId')).then(res => {
			if (res.code == 200) {
				this.carState = res.data.carState;
				if (this.carState == 1) {
					this.$toast.fail('车辆离线')
				} else if (this.carState == 2) {
					this.$toast.fail('车辆关机')
				}
			} else {
				this.$toast.fail('请检查网络')
			}
		})
	}
}
</script>

<style></style>